// components/elements/TypeSections.js
import React from 'react';
import { Box } from '@mui/material';

export const TypeSection = (props) => {
  const {
    backgroundColor = null,
    marginY = 0,
    paddingY = 0,
    paddingX = 0,
    text,
    innerBoxSx = {}, // For additional inner Box styles
    fullWidth = true, // New prop for outer box width
    useInnerWrapper = false, // Default to false as requested
    ...otherProps
  } = props;

  // Define the inner wrapper Box as a constant
  const InnerBox = (
    <Box
      sx={{
        width: { 
          xs: "100%", 
          sm: 600, 
          md: 960, 
          lg: 1280, 
          xl: 1920 
        },
        paddingY,
        paddingX,
        ...innerBoxSx,
      }}
    >
      {text}
    </Box>
  );

  return (
    <Box
      sx={{
        marginY,
        display: "flex",
        flexDirection: "column",
        alignItems: "center",
        justifyContent: "center",
        backgroundColor,
        width: fullWidth ? "100%" : "auto",
        ...(useInnerWrapper ? {} : { paddingY, paddingX }),
      }}
      {...otherProps}
    >
      {useInnerWrapper ? InnerBox : text}
    </Box>
  );
};

export default TypeSection;